<template>
  <div class="app-container">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="brandId"
        header-align="center"
        align="center"
        label="品牌id">
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="品牌名">
      </el-table-column>
      <el-table-column
        prop="logo"
        header-align="center"
        align="center"
        label="品牌logo地址">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.logo"
            fit="contain"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="descript"
        header-align="center"
        align="center"
        label="介绍">
      </el-table-column>
      <el-table-column
        prop="showStatus"
        header-align="center"
        align="center"
        label="显示状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.showStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="updateBrandStatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="firstLetter"
        header-align="center"
        align="center"
        label="检索首字母">
      </el-table-column>
      <el-table-column
        prop="sort"
        header-align="center"
        align="center"
        label="排序">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="240"
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="updateCatelogHandle(scope.row.brandId)">关联分类</el-button>
          <el-button type="success" size="small" @click="addOrUpdateHandle(scope.row.brandId)">修改</el-button>
          <el-button type="danger" size="small" @click="deleteHandle(scope.row.name, scope.row.brandId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

    <el-dialog title="关联分类" :visible.sync="cateRelationDialogVisible" width="40%">
      <el-popover placement="right-end" v-model="popCatelogSelectVisible" width="425">
        <category-cascader :catelogPath.sync="catelogPath" style="width: 400px;"></category-cascader>
        <div style="text-align: right; margin-top: 10px">
          <el-button size="mini" type="text" @click="popCatelogSelectVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="addCatelogSelect">确定</el-button>
        </div>
        <el-button slot="reference">新增关联</el-button>
      </el-popover>

      <el-table :data="cateRelationTableData" style="width: 100%; margin-top: 20px;" v-loading="cateRelationDialogLoading">
        <el-table-column prop="id" label="#"></el-table-column>
        <el-table-column prop="brandName" label="品牌名"></el-table-column>
        <el-table-column prop="catelogName" label="分类名"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="deleteCateRelationHandle(scope.row.id,scope.row.brandId)"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cateRelationDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cateRelationDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AddOrUpdate from './brand-add-or-update'
import CategoryCascader from "@/components/Common/category-cascader";
import { list, delMultiple, add, update } from '@/api/goods/brand'
import { add as addRelation, catelogList } from '@/api/goods/category-brand-relation'

export default {
  data() {
    return {
      dataForm: {
        key: ''
      },
      brandId: 0,
      catelogPath: [],
      cateRelationTableData: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      cateRelationDialogVisible: false,
      cateRelationDialogLoading: false,
      popCatelogSelectVisible: false
    }
  },
  components: {
    AddOrUpdate,
    CategoryCascader
  },
  created() {
    this.getDataList()
  },
  methods: {
    addCatelogSelect() {
      //{"brandId":1,"catelogId":2}
      this.popCatelogSelectVisible =false;
      addRelation({
        brandId:this.brandId,
        catelogId:this.catelogPath[this.catelogPath.length-1]
      }).then(() => {
        this.getCateRelation();
      }).catch(() => {})
    },
    deleteCateRelationHandle(id, brandId) {
      delMultiple([np])
        .then(() => {
          this.getCateRelation();
        }).catch(() => {
      })
    },
    updateCatelogHandle(brandId) {
      this.cateRelationDialogVisible = true;
      this.cateRelationDialogLoading = true;
      this.cateRelationTableData = [];
      this.brandId = brandId;
      this.getCateRelation();
    },
    getCateRelation() {
      catelogList( { brandId: this.brandId })
        .then(({ data }) => {
          this.cateRelationTableData = data;
          this.cateRelationDialogLoading = false;
        })
        .catch(() => {})
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      list( {
        'page': this.pageIndex,
        'limit': this.pageSize,
        'key': this.dataForm.key
      }).then((response) => {
        this.dataList = response.page.list
        this.totalPage = response.page.totalCount
        this.dataListLoading = false
      }).catch(()=>{})
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(name, id) {
      const names = []
      const ids = []
      if (id) {
        ids.push(id)
        names.push(' 【' + name + '】 ')
      } else {
        this.dataListSelections.map(item => {
          ids.push(item.brandId)
          names.push(' 【' + item.name + '】 ')
          return item.brandId
        })
      }
      // const ids = id ? [id] :
      this.$confirm(`确定对 ${names.join(',')} 进行${id ? '删除' : '批量删除'}操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMultiple(ids)
          .then(() => {
            this.$message.success('删除成功')
            this.getDataList()
          })
      }).catch(() => {})
    },
    updateBrandStatus(data) {
      const { brandId, showStatus } = data
      update({ brandId, showStatus:showStatus ? 1 : 0 })
        .then(() => {
          // this.$message.success('修改成功')
        }).catch(()=>{})
    }
  }
}
</script>
